<template>
  <div class="goods">
    <div class="banxin">
      <Breabcrumb>
        <span slot="name1">首页</span>
        <span slot="name2">全部商品</span>
      </Breabcrumb>
      <img src="../assets/images/products/banner.png" alt="" />
      <ul>
        <li>
          <strong>排序：</strong>
          <span v-for="(item, index) in options1" :key="index" :class="(currentIndex === index ? 'active' : '')" @click="getindexFn(index,item.min,item.max)">
            {{ item.text }}
          </span>
        </li>
        <li>
          <strong>分类:</strong>
          <span v-for="(item, index) in options2" :key="index" @click="getindex2Fn(index,item.type)" :class="currentIndex2===index?'active':''"> {{ item.text }}</span>
        </li>
      </ul>
      <List :arr="getGoods"></List>

      <div class="loading">
        <i class="iconfont icon-loading"></i>
        <span>{{loading?'下拉加载更多~':'已经到底啦~'}}</span>
      </div>

    </div>
    
  </div>
</template>

<script>
import Breabcrumb from '../components/home/Breabcrumb.vue'
import {AddGoodsApi} from '../request/api.js'
import List from '../components/home/List.vue'
//声明一个obj，用来存放每一份数组项（每项是八个）
let obj = {}
//声明一个objKey，用来指明那一份数组项
let objKey = 0
export default {
  mounted(){
    //定义scroll事件
    window.addEventListener('scroll',this.scrollFn)
  },
  beforeDestroy(){
    //离开此组件时销毁事件
    window.removeEventListener('scroll',this.scrollFn)
  },
  created(){
    //判断url中是否携带keyword，如果有就改变data中的数据在发送请求获取数据
    if(this.$route.query.keyword){
      this.keyword = this.$route.query.keyword
    }
    //发送请求获取数据
    this.getGoodsFn()
  },
  watch:{
    //路由中的keyword改变就刷新页面
    "$route.query.keyword":{
      handler(newVal,oldVal){
        if(newVal !== oldVal){
          //刷新页面
          this.$router.go(0)
        }
      }
    }
  },
  methods: {
    scrollFn(){
      //获取当前窗口高度
      let windowHeight = window.innerHeight || document.documentElement.clientHeight||
      document.body.clientHeight
      //滚动长度
      let st = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      //文档长度
      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollTop
      //当obj对象的长度等于索引时，就说明 obj对象中没有数据可以渲染了
      if(objKey === Object.keys(obj).length-1){
        //显示文字已经到底了
        this.loading = false
        //返回，不执行后边
        return
      }
      
      //如果条件成立就说明到达页面底部，需要在多渲染数据
      if(windowHeight+st >= scrollHeight){
        //从上一个属性加一，不会重复
        objKey++
        //从当前渲染的数组后面追加数组
        this.getGoods = this.getGoods.concat(obj[objKey])
      }
    },
    getindexFn(index,min,max) {
      //更改data中的数据为当前项的数据
      this.min =min
      this.max =max
      this.currentIndex = index
      this.getGoodsFn()
    },
    getindex2Fn(index,type){
      this.type = type
      this.currentIndex2 = index
      this.getGoodsFn()
    },
    getGoodsFn(){
      //请求前恢复初始值
      obj = {}
      objKey = 0
      this.loading =true
      AddGoodsApi(
      {
        did:this.did,
        type:this.type,
        min:this.min,
        max:this.max,
        keyword:this.keyword
      }
    ).then(res=>{
      if(res.code === 0){
        //res.data中的数据小于8个 直接渲染到页面
        if(res.data.length <= 8){ 
          this.loading = false
          this.getGoods = res.data
          //删除事件
          window.removeEventListener('scroll',this.scrollFn)
        } else {
          //分割数组为 每份八项
          for(let i=0;i<res.data.length/8;i++){
            //obj[1] 添加八项 以此类推
            obj[i] = res.data.slice(8*i,8*(i+1)) 
         }
         //渲染最开始的8项
         this.getGoods = obj[0]
         //监听事件
         window.addEventListener('scroll',this.scrollFn)
        }

      }
    })
    }
  },
  data() {
    return {
      loading:true,
      keyword:'',
      getGoods:[],
      did:0,
      type:0,
      min:0,
      max:0,
      currentIndex: 0,
      currentIndex2:0,
      options1: [
        { min: 0, max: 0, text: '全部' },
        { min: 0, max: 0, text: '我能兑换的' },
        { min: 0, max: 500, text: '0-500' },
        { min: 500, max: 1000, text: '500-1000' },
        { min: 1000, max: 1500, text: '1000-1500' },
        { min: 1500, max: 2500, text: '1500-2500' },
        { min: 2500, max: 6500, text: '2500-6500' },
        { min: 6500, max: 10000, text: '6500-10000' },
      ],
      options2: [
        { type: 0, text: '全部' },
        { type: 1, text: '实体商品' },
        { type: 2, text: '虚拟商品' },
      ],
    }
  },
  components: {
    Breabcrumb,
    List
  },
}
</script>

<style lang="less" scoped>
@import url('../totao.css');
.goods {
  .banxin {
    ul {
      padding-bottom: 30px;
      li {
        cursor: pointer;
        user-select: none;
        margin-top: 30px;
        span {
          margin-left: 15px;
          color: #999999;
         
        }
         .active {
            color: #00329b;
            font-weight: bold;
          }
      }
    }
  }
}
.loading{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
  i {
    margin-right: 10px;
    //匀速一直旋转
    animation: loading 3s infinite linear;
}
 //定义动画 0到360度旋转
@keyframes loading {
  from {
    transform :rotate(0deg);
  }
  to {
    transform :rotate(360deg);
  }
}
}
</style>
